<template>
  <div class=" my-pay-stub">
    <div class="max-w header-card">
      <div class="header-card-list card">
        <div class="title-header ">
          <div class="title-header-test">发薪月份：</div>
          <div class="title-header-year">
            <el-date-picker style="width:auto" v-model="data.monthData" :editable="false" type="month"
              placeholder="请选择年/月" @change="select(data.monthData)" />
          </div>
          <div class="title-header-wage">
            <router-link class="router-link-active" :to="{ path: '/salaryHistory', query: { key: data.key } }"
              style="height:100%;width:100%" :key="data.key">
              <!-- <img class="wageImg" src="../../assets/list.png" />
              <span class="wage" >详情</span> -->
              <el-button class="primaryBtn" type="primary">历史薪资</el-button>
            </router-link>
          </div>
        </div>
        <div class="title-list">
          <div class="title-list-pay">
            <p class="salary-spec">本月实发工资</p>
            <p class="salary">{{ data.list.takehomepay || '--' }} <span>元</span></p>
          </div>
          <div class="title-list-problem">
            <div :class="data.hint ? 'problem2' : 'problem'">
              <img class="problem-img" src="../../assets/dialogue.png" />
              {{ data.iswrong ? '有异议' : data.hint ? '已确认' : '未确认' }}
            </div>
          </div>
        </div>
      </div>
      <div class="reminder" v-if="data.show">
        <img class="reminder_down" src="../../assets/count.png" />
        <p class="reminder_text">工资单属于敏感信息,请注意保密!</p>
        <img class="reminder_delete" src="../../assets/delete.png" @click="deleteShow" />
      </div>
    </div>
    <div :class="!data.hint && !data.iswrong ? 'max-w particulars' : 'max-w  particulars particulars2'">
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">姓&nbsp;&nbsp;&nbsp;名：</p>
          <p class="particulars_list_details">{{ data.list.personname || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">部&nbsp;&nbsp;&nbsp;门：</p>
          <p class="particulars_list_details">{{ data.list.k3deptname || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">基本工资：</p>
          <p class="particulars_list_details">{{ data.list.basepays || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">加班费：</p>
          <p class="particulars_list_details">{{
            (Number(data.list.pacificovertimepay) + Number(data.list.weekendovertimepay)) || '暂无'
          }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">月度奖：</p>
          <p class="particulars_list_details">{{ data.list.monthlyaward || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">岗位津贴：</p>
          <p class="particulars_list_details">{{ data.list.postallowance || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">综合补贴：</p>
          <p class="particulars_list_details">{{ data.list.comprehensivesubsidy || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">职务津贴：</p>
          <p class="particulars_list_details">{{ data.list.subsidy || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">其他收入：</p>
          <p class="particulars_list_details">{{ data.list.otherPay || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card  footing">
          <p class="send">本月应发合计 ：{{ data.list.salary || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">社&nbsp;&nbsp;&nbsp;保：</p>
          <p class="particulars_list_details">{{ +data.list.socialsecurity || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">公积金：</p>
          <p class="particulars_list_details">{{ data.list.housingfund || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">个&nbsp;&nbsp;&nbsp;税：</p>
          <p class="particulars_list_details">{{ data.list.individualincometax || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">工会费：</p>
          <p class="particulars_list_details">{{ data.list.tradeunion || '暂无' }}
          </p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">水电费：</p>
          <p class="particulars_list_details">{{ data.list.waterandelectricity || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">物业管理费：</p>
          <p class="particulars_list_details">{{ data.list.propertymanagementfee || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card  footing">
          <p class="send">本月扣款合计 ：&nbsp;{{ data.list.withhold || '暂无' }}</p>
        </div>
      </div>
    </div>
    <div class="max-w timeToTip " v-if="!data.hint && !data.iswrong">
      <p class="timeToTip_count">工资条在<span style="color:#EE8F46;font-size:18px">{{ data.time }}</span>后自动确认!</p>
      <p class="timeToTip_hint">如果对本工资条有异议请及时进行反馈!</p>
    </div>
    <div class="max-w bottomButtn">
      <el-button class="bottomButtn_query" type="info" plain :disabled="data.iswrong || data.hint" @click="openClick">{{
        data.iswrong ? '有异议' : '有异议?'
      }}</el-button>
      <el-button class="bottomButtn_confirm" type="warning" plain :disabled="data.hint" @click="confirmation">{{ data.hint
        ?
        '已确认' : '确认!'
      }}</el-button>
    </div>
    <div class="max-w feedback" v-if="data.visiable" ref="dialog">
      <problem-feedback @getChildren="oncFun" @getChildrenConfirm="confirm" :id="data.id"></problem-feedback>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, watch } from 'vue'
import { getSalaryInfo, checkSalary, userinfo } from '@/api/salaryApi'
import problemFeedback from '@/components/common/problemFeedback'
import { ElMessage } from 'element-plus'

const data = reactive({
  show: true,
  monthData: (new Date().getMonth() + 1 - 1 != 0 ? new Date().getFullYear() : new Date().getFullYear() - 1) + '-' + (new Date().getMonth() + 1 - 1 != 0 ? new Date().getMonth() + 1 - 1 : 12),
  visiable: false, // 错误信息的展示
  key: localStorage.getItem("key")||'', // 用户信息
  list: '', //信息列表
  id: null,  // 用户id
  hint: false, // 确认状态
  pushdate: '', //发送时间
  time: '', // 倒计时
  iswrong: false // 错误信息反馈状态
})
// 接收子组件传递的事件
const oncFun = (x, y) => {
  data.visiable = y
  watch(() => [data.visiable], () => {
    salaryInfo()
  })
}


onMounted(() => {
console.log(data.key)
if(data.key==''){
  queryString()
}else{
  salaryInfo()
}
// QueryString('key')
})

// 获取网址的key或者code
const queryString = () => {
  // var uri = window.location.href;
  var params = new URLSearchParams(window.location.href.split("?")[1])
  data.key = params.get('key')
  data.code = params.get('code')
  // console.log(data.key != null)
  if (data.key != null) {
    data.key= data.key.replace(/\s/g, '+');
    salaryInfo()
  }
  if (data.key == null && (data.code != null || data.code != "")) {
    userinfo(data.code).then(res => {
      console.log(res)
      if (res.statusCode == 200) {
        data.key = res.message
        localStorage.setItem("key",data.key);
        salaryInfo()
      } else {
        ElMessage('查询失败！！！')
      }
    })
  }
}

//  reminder展示与隐藏
const deleteShow = () => {
  data.show = false
}

// 选择时间
const select = (monthData) => {
  // 如果不为空就执行后续操作
  var month
  if (monthData !== null) {
    if (monthData.getMonth() + 1 < 10) {
      month = '0' + (monthData.getMonth() + 1)
    } else {
      month = (monthData.getMonth() + 1)
    }
    data.monthData = monthData.getFullYear() + '-' + month
  } else {
    console.log('r')
  }
  salaryInfo()
}

// 接口调用
const salaryInfo = () => {
  // console.log(data.monthData)
  if (data.monthData != null) {
    var year = data.monthData.split('-')[0]
    var month = data.monthData.split('-')[1]
  }
  data.list = []
  getSalaryInfo({
    key: data.key,
    salaryyear: year,
    salarymonth: month
  }).then(res => {
    // console.log(res)
    if (res.salarylist.length > 0) {
      data.list = res.salarylist[0]
      data.id = res.salarylist[0].id
      data.pushdate = res.salarylist[0].pushdate
      // 基本工资 丧假 婚假 带薪年假 假日工资 
      data.list.basepays = (Number(data.list.basepay) +
        Number(data.list.funeralleave) +
        Number(data.list.maritalleave) +
        Number(data.list.payrollonpaidleave) +
        // Number(data.list.funeralleave) +
        Number(data.list.holidaypay))
      // 其他收入 中班费 餐补  值班费 奖金 产假
      // Number(data.list.subsidy) + // 补贴  从其他收入里面单独出来显示
      data.list.otherPay = (Number(data.list.middleshiftpay) +
        Number(data.list.ricesubsidies) +
        Number(data.list.dutyfee) +
        Number(data.list.moneyaward) +
        Number(data.list.sickleave) +
        Number(data.list.maternityleave))

      //扣款项合计  社保  住房公积金 个税 工会 水电费  物业费
      data.list.withhold = (Number(data.list.socialsecurity) +
        Number(data.list.housingfund) +
        Number(data.list.individualincometax) +
        Number(data.list.tradeunion) +
        Number(data.list.waterandelectricity) +
        Number(data.list.propertymanagementfee)).toFixed(2)

      if (res.salarylist[0].isconfirmed == 'Y' || res.salarylist[0].autoconfirm == 'Y') {
        data.hint = true
        data.iswrong = true
      } else {
        data.hint = false
      }
      if (res.salarylist[0].iswrong == 'Y') {
        data.iswrong = true
      } else {
        data.iswrong = false
      }
    }
    // 循环执行
    countDown()
  })
}

// 有异议；打开弹框
const openClick = () => {
  data.visiable = true
}

// // 获取网址的key
// const QueryString = (val) => {
//   var uri = window.location.href;
//   var re = new RegExp("[?&]" + val + "=([^&?]*)", "ig");
//   data.key = decodeURIComponent ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 2)) : null)
//   console.log(data.key)
// }

// 实发工资确认
const confirmation = () => {
  checkSalary({ id: data.id }).then(res => {
    // console.log(res)
    if (res.statusCode == 200) {
      ElMessage('实发薪资已确定无误！！')
      salaryInfo()
      data.disbled = true
      // console.log(data.hint)
    }
  })
}

// 倒计时函数
const countDown = () => {
  // console.log(data.pushdate)
  if (data.pushdate == "" || data.pushdate == null) {
    data.time = "  "
  }
  else {
    var start = new Date((data.pushdate).replace(/-/g, "/")).getTime() / 1000 //获取表格的时间转换为时间戳
    var end = (start + (60 * 60 * 24 * 1)) // 在转换的时间上添加24小时
    // var time=(new Date(parseInt(end) * 1000).toLocaleString()).replace(/-/g, "/") // 将最终的时间格式转换为2022/12/12 08:08:09
    // console.log(time)
    var EndTime = new Date(end * 1000);
    var NowTime = new Date();
    var t = EndTime.getTime() - NowTime.getTime();
    // console.log(t)
    // var d = parseInt(times / 60 / 60 / 24); // 把秒数转换成天数  （parselnt把得到的数转换为整数）
    // d = d < 10 ? '0' + d : d; //这里为了让时间数好看一点，比如把4天改成04天，所以加了三元判定，下面也是如此；
    var h = parseInt(t / 1000 / 60 / 60 % 24); //时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(t / 1000 / 60 % 60); //分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(t / 1000 % 60); // 秒
    s = s < 10 ? '0' + s : s;
    // console.log(h,m,s)
    // return d + '天' + h + '时' + m + '分' + s + '秒'; //返回函数计算出的值
    data.time = h + '时' + m + '分' + s + '秒'; //返回函数计算出的值/
    // data.dateList =new Date(EndTime); //返回函数计算出的值
    if (t < 0 || data.hint) {
      clearTimeout(countDown);
      return false;
    }
    setTimeout(countDown, 1000);
  }
}

</script>

<style scoped lang="scss">
@import "index.scss";
</style>
